<!DOCTYPE html>
<html lang="en">
<head>
    <title>OJ代码编辑区</title>
    <link rel="stylesheet" href="Public/layui/css/layui.css">
    <style type="text/css" media="screen">

    </style>
</head>
<body>
<br>
<form class="layui-form" action="">
    <div class="layui-row">
        <div class="layui-input-inline">
            <select  id="language" name="city" lay-verify="">
                <option value="c_cpp" >C/C++</option>
                <option value="java" >Java</option>
                <option disabled value="javascript">JavaScript</option>
                <option  value="html">HTML</option>
            </select>
        </div>
        <div align="left" style="display: inline;">
            <a href="javascript:editLang();" id="lang"  class="layui-btn">修改</a>
        </div>
        <div class="layui-btn-group"  style="display: inline;">
            <a href="javascript:editCode_fontSize_add();" class="layui-btn ">字体加</a>
            <a href="javascript:editCode_fontSize_subtract();" class="layui-btn ">字体减</a>
        </div>
        <div align="right" style="float: right;">
            <div class="layui-row">
                <div class="layui-input-inline">
                    <input type="text" id="parameter" name="parameter" required lay-verify="parameter" placeholder="输入参数（空格隔开）" autocomplete="off" class="layui-input">
                </div>
                <a href="javascript:run();" id="run"  class="layui-btn">
                    <i class="layui-icon">&#xe609;</i> 运行
                </a>
            </div>

        </div>
    </div>

    <div id="editor"style=";width: 100%;">#include "stdio.h"
int main() {
    printf("Hello, World!\n");
    return 0;
}</div>

</form>
<script src="Public/layui/layui.js"></script>
<script src="Public/Common/Js/jquery-2.1.0.min.js"></script>
<script src="Public/ace-builds-master/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
    layui.use(['layer', 'form','element'], function(){
        var layer = layui.layer
            ,form = layui.form
            ,element = layui.element;

        //layer.msg('Hello World');
    });
    var Code_fontSize = 15;
    var editor = ace.edit("editor");
    //editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/c_cpp");
    document.getElementById('editor').style.fontSize=Code_fontSize+'px';



    function run() {

        $.post('Home-Index-Run.html?lang='+$("#language").val(),{'code':editor.getValue(),'parameter':$("#parameter").val()},function (ret) {
            layer.open({
                title: '运行结果',
                shade: 0,
                offset: 'rb',
                maxmin: true,
                type: 1,
                content: ret,
                area: ['450px', '300px']
            });
        },'html');



    }

    function editCode_fontSize_add() {
        Code_fontSize++;
        document.getElementById('editor').style.fontSize=Code_fontSize+'px';
    }
    function editCode_fontSize_subtract() {
        if(Code_fontSize>10){
            Code_fontSize--;
        }
        document.getElementById('editor').style.fontSize=Code_fontSize+'px';
    }

    function editLang() {
        editor.getSession().setMode("ace/mode/"+$("#language").val());
        layer.msg("已切换到"+$("#language").val()+"语言");
    }
    var mainheight = $(window).height()-69;
    $("#editor").height(mainheight);

</script>
</body>
</html>